<script setup>
import Header from "@/components/Header.vue";
import Menu from "@/components/backend/leftMenu.vue";
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
const data = reactive({
  name:null
})
const tableData = [
  {
    date: '2025-2-20',
    name: 'day240220',
    action:'删除 | 修改',
  },
  {
    date: '2025-2-24',
    name:'day240224',
    action:'删除 | 修改',
  },
  {
    date: '2025-2-26',
    name: 'day240226',
    action:'删除 | 修改',
  },
  {
    date: '2025-2-28',
    name:'day240228',
    action:'删除 | 修改',
  },
]
</script>


<template>
  <!-- 头部:start  -->
  <Header>
  </Header>
  <!-- 头部:end  -->

  <!-- 下方区域:start  -->


<div style="display: flex">
  <!-- 左侧菜单区域:start  -->
    <Menu>
    </Menu>
    <!-- 左侧菜单区域: end  -->
  <div style="flex:1; width: 0;margin:10px;">
    <h1>视频管理</h1>
    <div class="card">
      <el-input style="width: 260px;margin-top:30px; margin-right: 5px" v-model:label="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
      <el-button style="margin-top:30px;" type="primary">查询</el-button>
      <RouterLink to="/backend/video-add">
      <el-button style="margin-top:30px;float: right;" type="danger">Add</el-button>
      </RouterLink>
    </div>
    <div style="margin-top: 60px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="Name" width="180">
        </el-table-column>
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="action" label="Action" />
      </el-table>
    </div>

  </div>
</div>
  <!-- 下方区域:end  -->

</template>

<style>

</style>
